<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-前缀的是vue指令</title>
    <script src="vue.min.js"></script>
    <style>
        #div1>div{
            min-height: 30px;
            background: #009a61;
            margin: 6px;
            color: white;
        }
    </style>
</head>
<body>
<div id="div1">
    <!--vue模板语言内支持js代码-->
    <div>{{5+5}}</div>
    <div>{{ok?"yes":"no"}}</div>
    <div>{{msg.split('').reverse().join(',')}}</div>
    <div v-if="divshow">我是否显示取决于divshow</div>
    <div v-on:click="clickfunc()">点击我</div><!--v-on监听各种事件-->
    <div @click="clickfunc()">点击我</div><!--v-on缩写-->
    <form v-on:submit.prevent="onSubmit"></form><!--这样代表对于onsubmit事件调用event.preventDefault()紧张默认提交转而触发onSubmit方法-->
    <div>
        <p>{{inputval}}</p>
        <input type="text" v-model="inputval">
    </div>

    <!--vue过滤器，类似linux管道的写法，过滤器方法可以接收表达式的值作为第一个参数-->
    <div>
        {{msg | filter1 | filter2}}
    </div>
</div>
<script>
    var vm = new Vue({
        el:"#div1",
        data:{
            ok:false,
            msg:"RUNOOB",
            divshow:true,
            clickfunc:function () {
                alert("点击事件");
            },
            inputval:"我显示input的值"
        },
        filters:{
            filter1:function (value) {
                return value + " filter1 ";
            },
            filter2:function (value) {
                return value + "filter2 ";
            }
        }
    })
</script>
</body>
</html>